<template>
  <SafeArea
    position="top"
    :style="currentStyle">
    <div
      v-if="header"
      style="height: 44px;"
    />
    <div :style="`height: ${ parseInt(height) }px;`">
      <slot/>
    </div>
  </SafeArea>
</template>

<script>
  import theme from '../../mixins/theme.js'

  export default {
    name: 'ThemeHeader',
    props: {
      header: {
        type: Boolean,
        default: true
      },
      height: {
        type: [String, Number],
        default: ''
      }
    },
    mixins: [theme],
    computed: {
      currentStyle () {
        return {
          background: this.$theme.color_gradient
        }
      }
    }
  }
</script>
